<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Table Element</title>
<style type="text/css">
	.hidden {
		display: none;
	}
	.popupLayer {
		position: absolute;
		left: 100px;
		top: 100px;
		width: 300px;
		padding: 5px;
		border: 5px solid gray;
		background-color: #EEE;
	}
</style>
<script type="text/javascript" src="10-2.js"></script>
</head>
<body>
	<h1>테이블 엘리먼트</h1>
	<table>
		<thead>
			<tr>
				<th>품명</th><th>가격(원)</th><th>갯수</th>
				<th>기능</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>사과</td><td>1000</td><td>5</td>
				<td>
					<button type="button" onclick="tableCtrl.removeRow(this);">삭제</button>
					<button type="button" onclick="tableCtrl.upRow(this);">▲</button>
					<button type="button" onclick="tableCtrl.downRow(this);">▼</button>
				</td>
			</tr>
			<tr>
				<td>배</td><td>2000</td><td>3</td>
				<td>
					<button type="button" onclick="tableCtrl.removeRow(this);">삭제</button>
					<button type="button" onclick="tableCtrl.upRow(this);">▲</button>
					<button type="button" onclick="tableCtrl.downRow(this);">▼</button>
				</td>
			</tr>
			<tr>
				<td>딸기</td><td>3000</td><td>2</td>
				<td>
					<button type="button" onclick="tableCtrl.removeRow(this);">삭제</button>
					<button type="button" onclick="tableCtrl.upRow(this);">▲</button>
					<button type="button" onclick="tableCtrl.downRow(this);">▼</button>
				</td>
			</tr>
		</tbody>
	</table>
	<button type="button" onclick="pageCtrl.toggle();">추가</button>
	<div class="hidden" id="formContainer">
		<form name="newData">
			품명: <input type="text" name="productName" /><br />
			가격: <input type="number" name="productPrice" />(원)<br />
			개수: <input type="number" name="productCount" /><br />
			<button type="button" onclick="pageCtrl.addData();">추가하기</button>
		</form>
	</div>
</body>
</html>